<template>

  <div id="Company_drugs_medcode">
    <span>
      <img src="../assets/trace.png" alt="" class="bread-icon">
    </span>
    <el-breadcrumb style="display:inline-block">
      <el-breadcrumb-item>
        <span style="font-size:20px;">追溯码管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-size:15px;line-height:20px;">追溯码查询</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-wrap">
      <div class="topNav">
        <span class="navLeft">基本信息查询</span>
        <span class="navRight">
          <el-button size="small" @click="traceSearch" class="searchInput" icon="el-icon-search">搜索</el-button>
          <el-button size="small" @click="setColumns" class="el-button--primary" icon="el-icon-setting">设置</el-button>
        </span>
        <span class="navMid">
          <img class="icon-search" src="../assets/search.png" alt="">
          <el-input v-model="searchData" size="small" placeholder="请输入内容"></el-input>
        </span>
      </div>
      <el-table :data="tableData" class="table-common" border>
        <el-table-column prop="code" label="追溯码id" v-if='columns.contains("追溯码id")'>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" v-if='columns.contains("创建时间")'>
        </el-table-column>
        <el-table-column prop="update_at" label="更新时间" v-if='columns.contains("更新时间")'>
        </el-table-column>
        <el-table-column prop="drug.common_name" label="药品通用名称" v-if='columns.contains("药品通用名称")'>
        </el-table-column>
        <el-table-column prop="drug.approval_number" label="批准文号" v-if='columns.contains("批准文号")'>
        </el-table-column>
        <el-table-column prop="drug.created_at" label="生产日期" v-if='columns.contains("生产日期")'>
        </el-table-column>
        <el-table-column prop="drug.approval_expiry_date" label="批准文号有效期" v-if='columns.contains("批准文号有效期")'>
        </el-table-column>
        <el-table-column prop="drug.expiry_date_number" label="药品有效期" v-if='columns.contains("药品有效期")'>
        </el-table-column>
        <el-table-column prop="drug.expiry_date_unit" label="有效期单位" v-if='columns.contains("有效期单位")'>
        </el-table-column>
        <el-table-column prop="drug.standard" label="制剂规格" v-if='columns.contains("制剂规格")'>
        </el-table-column>
        <el-table-column prop="drug.factory" label="生产企业" v-if='columns.contains("生产企业")'>
        </el-table-column>
        <el-table-column prop="drug.enterprise" label="所属企业" v-if='columns.contains("所属企业")'>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="showForm(scope.row)" type="info" plain size="mini">查看详情</el-button>
            <el-button @click="showLocation(scope.row)" type="primary" plain size="mini">位置信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="追溯码详情" :visible.sync="dialogFormVisibleShow">
      <el-form :model="formData">
        <el-form-item label="追溯码id" :label-width="formLabelWidth">
          <el-input v-model="formData.code" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="formData.created_at" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="更新时间" :label-width="formLabelWidth">
          <el-input v-model="formData.updated_at" auto-complete="off" disabled></el-input>
        </el-form-item>
        <h3>药品信息</h3>
        <el-form-item label="药品通用名称" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.common_name" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="批准文号" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.approval_number" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="药品有效期" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.approval_expiry_date" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="批准文号有效期" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.expiry_date_number" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="有效期单位" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.expiry_date_unit" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="剂型" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.form" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="制剂规格" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.standard" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="生产企业" :label-width="formLabelWidth">
          <el-input v-model="formData.drug.factory" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属企业 " :label-width="formLabelWidth">
          <el-input v-model="formData.drug.enterprise" auto-complete="off" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisibleShow = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogFormVisibleShow = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="自定义列表" :visible.sync="setColumnsShow">
      <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="columns" @change="handleCheckedHeaderChange" class="tableSelect">
          <el-checkbox v-for="item in columnsSelect" :label="item" :key="item" border>{{item}}</el-checkbox>
        </el-checkbox-group>
        <div style="text-align:right">
          <el-button class="el-button--primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="位置信息" :visible.sync="medcodeLocationShow">
      <template>
        <div class="medcode-location" style="height:300px;padding:50px">
          <el-steps :active="activeSteps" direction="vertical">
            <el-step title="生产企业" icon="iconfont icon-ti-factory" description="生产企业   2017-11-14    13:39:00 上海"></el-step>
            <el-step title="流通企业" icon="iconfont icon-ti-enterprise" description="流通企业   2017-11-15   14:45:00 上海"></el-step>
            <el-step title="杭州中转站" icon="iconfont icon-ti-exchange" description="杭州中转站    2017-11-16 13:47:00 杭州"></el-step>
            <el-step title="零售企业" style="max-width:100%!important;" icon="iconfont icon-ti-shop" description="零售企业"></el-step>
          </el-steps>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  const headerOptions = ['追溯码id', '创建时间', '更新时间', '药品通用名称', '批准文号', '批准文号有效期', '药品有效期', '有效期单位', '制剂规格', '生产企业', '所属企业'];

  export default {
    data() {
      return {
        searchData: '',
        adminId: '',
        adminToken: '',
        enterprise: '',
        dialogFormVisibleShow: false,
        // dialogFormVisibleSubmit: false,
        medcodeLocationShow: false,
        activeSteps: 2,
        setColumnsShow: false,
        isIndeterminate: true,
        formLabelWidth: '150px',
        checkAll: false,
        tableData: [{}],
        formData: {
          "code": "",
          "created_at": "",
          "drug": {
            "id": '',
            "created_at": "",
            "updated_at": "",
            "common_name": "",
            "approval_number": "",
            "approval_expiry_date": "",
            "expiry_date_number": '',
            "expiry_date_unit": "",
            "form": "",
            "standard": "",
            "factory": "",
            "enterprise": ''
          }
        },
        columns: [
          '追溯码id',
          '药品通用名称',
          '批准文号',
          '批准文号有效期',
        ],
        columnsSelect: headerOptions,
        // submitForm:{}
      }
    },
    methods: {
      traceSearch() {
        if (this.searchData != '') {
          this.$http({
            url: '/trace-code/' + this.searchData + '/',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
          }).then(
            response => {
              this.tableData = []
              this.tableData.push(response.data)
            }
          ).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: 'error400',
              type: 'error'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        });
        } else {
          this.$http({
            url: '/trace-code/',
            // url: '/drugs/'+adminId +'/',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
            data: {
              page: 1,
              form: '',
              enterprise_id: this.adminId,
              search: '',
              ordering: ''
            }
          }).then(
            response => {
              //success
              console.log(response)
              this.tableData = response.data.results
            },
            response => {
              //error
              console.log(response)
              //   this.$message({
              //   message: response.data.detail,
              //   type: 'warning'
              // });
            }
          )
        }
      },
      handleClick(row) {
        this.dialogVisible = true
        console.log(row);
      },
      showForm(row) {
        console.log(row)
        this.dialogFormVisibleShow = true
        this.formData = row
      },
      setColumns: function () {
        this.setColumnsShow = true
        // this.columns.push('standard')
      },
      handleCheckAllChange(val) {
        this.columns = val ? headerOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedHeaderChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.columnsSelect.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnsSelect.length;
        console.log(this.columns)
      },
      showLocation(row) {
        this.medcodeLocationShow = true
      }
    },
    mounted() {
      this.adminId = this.$store.getters.getInfo.id
      this.adminToken = this.$store.getters.getInfo.token
      this.enterprise = this.$store.getters.getInfo.enterprise
      this.$http({
        url: '/trace-code/',
        headers: {
          'Authorization': 'Token ' + this.adminToken
        },
        method: 'get',
        data: {
          page: 1,
          search: ''
        }
      }).then(
        response => {
          //success
          //   this.$message({
          //   message: '警告哦，这是一条警告消息',
          //   type: 'warning'
          // });
          console.log(response.data)
          this.tableData = response.data.results
        }
      )
    },
  }

</script>

<style scoped>
  #Company_drugs_medcode>>>.el-dialog {
    max-height: 600px;
    overflow: scroll;
  }

</style>
